<template>

  <el-container style="overflow: hidden; height: 100%; width: 100%; ">
    <el-header style=" border-bottom: 1px solid #060f1a12; display: flex; ">
      <api-header>
        <template v-slot:default>

          <img :src="webCfg.logo" style="height: 40px; margin-right: 20px;"/>
          <span style="color: #666;">| {{webCfg.head}}</span>

        </template>
      </api-header>
    </el-header>

    <el-container class="appi-body-contaniner" style="overflow-y: scroll; overflow-x: hidden;">

      <div style="width: 800px; margin-left: 50%; left: -400px; position: relative; box-sizing: border-box;
           z-index: 100; background-color: #fff; height: 100%;  padding: 0px 20px 0px 20px; ">

          <div style="display: flex; gap: 10px; margin-top: 20px; ">
            <el-input v-model="keyword" resize="none" style="flex: 1; height: 90px; " rows="4" type="textarea"
                      :placeholder="webCfg.placeholder"></el-input>
            <el-button @click="queryTrack"
                       :icon="loading ? 'el-icon-loading' : 'el-icon-search' "
                       style="height: 90px; width: 140px; font-size: 18px;">{{webCfg.query}}
            </el-button>
          </div>

          <div v-if="trackDataList && trackDataList.length > 0" >

                <div v-for="(item,index) in trackDataList" :key="index" style=" margin-top: 12px;  ">

                  <div style="
                    box-sizing: border-box;
                    padding: 10px 20px;
                    border: 1px solid #dcdfe6;
                    width: 100%;
                    color: #333;
                    background-color: #f4f4f5;
                    font-size: 14px;
                    line-height: 28px;
                  ">
                    {{webCfg.trackNo}}: {{item.trackNo}} &nbsp;&nbsp;&nbsp;&nbsp;
                    <template v-if="item.trackList[0].transportCompany">{{webCfg.transportCompany}}: {{item.trackList[0].transportCompany }} &nbsp;&nbsp;&nbsp;&nbsp;</template>
                    <template v-if="item.trackList[0].clearanceNo">{{webCfg.clearanceNo}}: {{item.trackList[0].clearanceNo }}</template>
                  </div>

                  <div style="margin-top: 20px;">
                    <el-timeline>

                      <el-timeline-item
                        v-for="(subItem,subIndex) in item.trackList"
                        :timestamp="$dateFormat(subItem.trackTime)"
                        placement="top"
                        :key="subIndex"
                        :color="subIndex==0 ? '#0bbd87': 'el-icon-more' "
                      >
                        {{ subItem.trackDesc }}
                        {{ subItem.trackRemark ? ' （'+ subItem.trackRemark + '）' : '' }}
                      </el-timeline-item>

                    </el-timeline>

                  </div>

                </div>

          </div>

          <el-row v-if="showEmtpy">
            <el-col style="width: 100%; text-align: center; font-size: 20px; color: #666; margin-top: 40px; ">
              <i class="el-icon-warning-outline"></i> {{webCfg.emptyMsg}}
            </el-col>
          </el-row>

      </div>

    </el-container>

  </el-container>

</template>

<script>

import ApiHeader from '@/layout/api-header.vue'

export default {

  components: { ApiHeader },

  data () {
    return {

      formValue: {},
      keyword: '',
      trackDataList: [],
      showEmtpy: false,
      loading: false,
      websiteType: '',

      webCfg: {
        logo: '',
        title: '',
        head: '',
        query: '',
        placeholdre: '',
        emptyMsg: '',
        trackNo: '',
        transportCompany: '',
        clearanceNo: ''
      },

      kybWebCfg: {
        logo: '//s.imlb2c.cn/default_log.png',
        title: '跨运宝物流查询',
        head: '物流轨迹查询',
        query: '查询',
        placeholder: '请输入跟踪号，多个跟踪号用`换行`或`空格`分隔，最多支持10个跟踪号',
        emptyMsg: '暂无轨迹信息',
        trackNo: '跟踪号',
        transportCompany: '运输商',
        clearanceNo: '清关车/柜号'
      },

      xinYouWebCfg: {
        logo: '//kyb-bronze-private-oss.oss-cn-shenzhen.aliyuncs.com/default/20230818/cfc256dd-20ba-4ec0-bfea-1ad74ef92e6d.png?Expires=1698888873&OSSAccessKeyId=LTAI5tB8kXSgytRY8Cyf77rn&Signature=nzE2RFZdEqbm07xedTLLrESZocM%3D',
        title: '跨运宝物流查询',
        head: '物流轨迹查询',
        query: '查询',
        placeholder: '请输入跟踪号，多个跟踪号用`换行`或`空格`分隔，最多支持10个跟踪号',
        emptyMsg: '暂无轨迹信息',
        trackNo: '跟踪号',
        transportCompany: '运输商',
        clearanceNo: '清关车/柜号'
      },

      taptimCfg: {
        logo: '//kyb-bronze-public-oss.oss-cn-shenzhen.aliyuncs.com/default_template/taptimlogo.png',
        title: 'Taptim логистический запрос',
        head: 'логистический запрос',
        query: 'Запрос',
        placeholder: 'Пожалуйста, введите номер трассировки, несколько номеров трассировки разделены « переводом строки » или « пробелом », поддерживается до 10 номеров трассировки',
        emptyMsg: 'Информация о траектории отсутствует',
        trackNo: 'Номер слежения',
        transportCompany: 'Транспортер',
        clearanceNo: 'Автомобиль для таможенного оформления'
      }

    }
  },

  // https://kyb-bronze-public-oss.oss-cn-shenzhen.aliyuncs.com/default_template/kyb_logo.jpeg

  watch: {},

  created () {
    let host = window.location.host

    if (host.indexOf('taptim') != -1) {
      this.webCfg = this.taptimCfg
    } else if (host.indexOf('xuexpress') != -1) {
      this.webCfg = this.xinYouWebCfg
    } else {
      this.webCfg = this.kybWebCfg
    }
    // this.webCfg = this.taptimCfg

    document.title = this.webCfg.title
  },

  mounted () {
    var _this = this
  },

  destroyed () {
  },

  methods: {

    queryTrack () {
      let _this = this

      _this.showEmtpy = false

      if (_this.loading) {
        return
      }

      _this.loading = true

      this.$ajax({
        url: '/tms-api/transport/TmsTrackRpc/track_query.json',
        data: {
          keyword: this.keyword
        },
        success: (response) => {
          this.trackDataList = response.data.rows

          if (!this.trackDataList || this.trackDataList.length == 0) {
            _this.showEmtpy = true
          }
        },
        complete () {
          _this.loading = false
        }
      })
    }

  }
}

</script>
<style scoped>
.el-timeline-item__wrapper{
  display: flex;
  gap: 20px;
}
.el-timeline-item__timestam{
  width: 180px;
}
.el-timeline-item__content{
  vertical-align: top;
  /*margin-top: -6px;*/
  flex: 1;
  white-space: normal;  word-break: break-all;
  line-height: 22px;
}
</style>
